<template>
  <el-row class="bgf">
    <el-col :span="12" :offset="5">
      <!-- model表单的数据 -->
      <!-- rules：校验规则 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- prop="type"校验 ，v-model="ruleForm.type"传值-->
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :disabled="$route.params.id > 0" :label="1"
              >目录</el-radio
            >
            <el-radio :disabled="$route.params.id > 0" :label="2"
              >菜单</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 2" label="上级" prop="pid">
          <el-select v-model="ruleForm.pid">
            <el-option label="顶级目录" :value="0"></el-option>
            <el-option
              v-for="(item, index) in memuList"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 1" label="图标" prop="icon">
          <el-input v-model="ruleForm.icon"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 2" label="地址" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$route.params.id > 0"
            type="primary"
            @click="submitForm('ruleForm')"
            >立即修改</el-button
          >
          <el-button v-else type="success" @click="submitForm('ruleForm')"
            >立即添加</el-button
          >
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        type: 1,
        pid: 0,
        title: "",
        url: "",
        icon: "",
        status: 1,
      },
      rules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      memuList: [],
    };
  },
  created() {
    // 获取下拉框的数据
    this.getSelectData();
    // 判断新增还是修改
    if (this.$route.params.id > 0) {
      // 有params说明是修改，发请求
      this.getDataById(this.$route.params.id);
    }
  },
  methods: {
    // 获取下拉列表的数据
    getSelectData() {
      this.$http("menulist?istree=1")
        .then((res) => {
          this.memuList = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 根据id获取菜单详情
    getDataById(id) {
      this.$http
        .get("/menuinfo", { params: { id } })
        .then((res) => {
          // 回显
          this.ruleForm = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 先验证，通过后发请求
    submitForm(formName) {
      // this.$refs[formName]通过refs找到这个表单，然后验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 成功只后发请求
          if (this.$route.params.id > 0) {
            this.ruleForm.id = this.$route.params.id
            // 修改
            this.$http
              .post("/menuedit", this.ruleForm)
              .then((res) => {
                // 添加成功后返回列表页
                this.$router.go(-1);
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            // 新增
            this.$http
              .post("/menuadd", this.ruleForm)
              .then((res) => {
                // 添加成功后返回列表页
                this.$router.go(-1);
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>